<!-- 设备型号下拉框 -->
<template>
  <px-form-item label="设备型号" prop="modelId" :rules="{ required: props.isRequired, message: '设备型号不能为空', trigger: ['blur', 'change'] }">
    <px-select-v2
      style="width: 100%"
      v-model="modelVal"
      placeholder="请选择设备型号"
      clearable
      filterable
      :disabled="props.isDisabled"
      :options="modelList"
      @focus="focusModel"
      @change="changeModel"
    />
  </px-form-item>
</template>

<script setup lang="ts">
import { queryEquipModelSelect } from "@/api/common";
import { ref, watch } from "vue";

// 父级方法和值
const emits = defineEmits(["changeModel"]);
const props = defineProps(["className", "systemCodes", "categoryId", "typeId", "modelId", "isRequired", "isDisabled"]);

const modelVal = ref(null);
const modelList = ref([]);

watch(
  () => props.modelId,
  val => {
    modelVal.value = props.modelId;
    if (val) {
      setTimeout(() => {
        focusModel();
      }, 0);
    }
  },
  { immediate: true }
);
// 获取设备型号下拉列表
const focusModel = async () => {
  const tempModelList = await queryEquipModelSelect({
    className: props.className,
    systemCodes: props.systemCodes,
    categoryId: props.categoryId,
    typeId: props.typeId
  });
  modelList.value = tempModelList?.map(item => ({ label: item.name, value: item.id, categoryId: item.categoryId, typeId: item.typeId })) || [];
};
// 改变设备型号值，传值给父级并做改变
const changeModel = () => {
  const arr = modelList.value?.filter(item => {
    return item.value === modelVal.value;
  });
  const categoryId = arr[0].categoryId;
  const typeId = arr[0].typeId;
  emits("changeModel", modelVal.value, categoryId, typeId);
};
</script>
<style lang="scss" scoped>
:deep(.px-select-v2) {
  .is-disabled {
    .px-select-v2__placeholder {
      color: rgba(0, 0, 0, 0.3);
    }
  }
}
</style>
